<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<!--引入css初始化文件-->
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<!--头部和底部 结构基本相同，做基本的公共样式-->
		<link rel="stylesheet" type="text/css" href="css/bace.css" />
		<!-- 中间部分 -->
		<link rel="stylesheet" type="text/css" href="css/index2.css" />
	</head>
	<body>
		<header>
			<div class="let">
				你好：<em></em>
				<a href='#' class="exit">退出</a>
			</div>
			<div class="w">
				<a href="javascript:;">
					<img src="images/top.jpg">
				</a>
			</div>
		</header>
		<div class="shortcut">
			<div class="w">
				<ul class="fl city">
					<li><i class="f10"></i><a href='javascript:;'>河南</a></li>
				</ul>
				<ul class="fr">
					<li>
						<a href="login.html" class="login">你好，请登录</a>
						<a href="register.html" class="f10 register">免费注册</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>我的订单</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>我的京东</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>京东会员</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;' class="f10">企业采购</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>客户服务</a>
						<i></i>
					</li>
					<li>
						<a href='javascript:;'>网站导航</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;' class="mobile">手机京东
							<img src="images/mobile.png" height="60" width="60" alt="">
						</a>
					</li>
					<li>
						<a href='javascript:;'></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="w middle">
			<div class="logo">
				<h1>
					<a href='javascript:;'></a>
				</h1>
			</div>
			<!-- 搜索 -->
			<div class="form">
				<input type="text" placeholder="行车记录仪">
				<button><i></i></button>
			</div>
			<!-- 购物车 -->
			<div class="shopCar">
				<span class="icon-cart"></span><a href='javascript:;'>我的购物车</a><span class="aSpan">0</span>
			</div>
			<!-- 关键词 -->
			<div class="hotworde">
				<a href='javascript:;' class="f10">新房大促销</a>
				<a href='javascript:;'>空调钜惠</a>
				<a href='javascript:;'>每日坚果</a>
				<a href='javascript:;'>华为</a>
				<a href='javascript:;'>买一赠一</a>
				<a href='javascript:;'>纸尿裤</a>
				<a href='javascript:;'>高效农机</a>
				<a href='javascript:;'>新鲜助V</a>
				<a href='javascript:;'>每100-50</a>
			</div>
			<!-- 小导航部分 -->
			<div class="navitems">
				<ul>
					<li><a href='javascript:;' class="f10">秒杀</a></li>
					<li><a href='javascript:;'>优惠卷</a></li>
					<li><a href='javascript:;'>PLUS会员</a></li>
					<li><a href='javascript:;'>闪购</a></li>
					<li class="space"></li>
					<li><a href='javascript:;'>拍卖</a></li>
					<li><a href='javascript:;'>京东时尚</a></li>
					<li><a href='javascript:;'>京东超市</a></li>
					<li><a href='javascript:;'>京东生鲜</a></li>
					<li class="space"></li>
					<li><a href='javascript:;'>海囤全球</a></li>
					<li><a href='javascript:;'>京东金融</a></li>
				</ul>
			</div>
		</div>
		<!--中间头部分 end-->
		<!-- 右侧浮动部分 -->
		<div class="subnav">
			<ul>
				<li>会员
					<div><a href='javascript:;'>京东会员</a></div>
				</li>
				<li>购物
					<div><a href='javascript:;'>购物车</a></div>
				</li>
				<li>关注
					<div><a href='javascript:;'>我的关注</a></div>
				</li>
				<li>足迹
					<div><a href='javascript:;'>我的足迹</a></div>
				</li>
				<li>消息
					<div><a href='javascript:;'>我的消息</a></div>
				</li>
				<li>咨询
					<div><a href='javascript:;'>咨询JIMI</a></div>
				</li>
				<li>反馈
					<div><a href='javascript:;'>反馈</a></div>
				</li>
			</ul>
		</div>
		
		<!--中间-->
		<div id="zjbf">
			<div id="content1">
				<h4 id="retive3"><span>商品已成功加入购物车</span>
					<p><span>配送至:</span>
						<select name="">
							<option value="河南郑州市二七区马寨镇">
								河南郑州市二七区马寨镇
							</option>
						</select>
					</p></h4>
			</div>
			<div id="ccc">
				<p><input type="checkbox" name="" class="check-all" id="checkAll" value="正选" /><span>全选</span><span>商品</span></p>
					<p><span>操作</span><span></span></p>
					<p><span>小计</span><span></span></p>
					<p><span>数量</span><span></span></p>
					<p><span>单价</span><span></span></p>
			</div>
			<div class="single">
				
				
				<!-- 
					<div class="single1">
						<input type="checkbox" name="" id="" value="" />
						<div class="tu">
							<img src="../bootstrap-3.3.7/docs/apple-touch-icon.png" >
						</div>
						<p>迟迟此后成都火车开了多少离开领导才</p>
					</div>
					<div class="single2">
						<p>￥88.88</p>
						<form action="" method="">
							<input type="button" name="" id="" value="-" />
							<input type="text" name="" id="" value="2" />
							<input type="button" name="" id="" value="+" />
						</form>
						<p>576</p>
						<a href="javascript:;">删除</a>
					</div>
					 -->
					
					
					
					
			</div>
			<div id="fix">
				<div id="lef">
					<p>
					<input type="checkbox" name="" class="check-all" id="checkAll" value="正选"/>
					<span>全选</span>
					</p>
					<p><a href="javascript:;" class="del-selected">删除选中商品</a></p>
					<p><a href="javascript:;">移到关注</a></p>
					<p><a href="javascript:;" class="clear-cart"><strong>清理购物车</strong></a></p>
				</div>
				<div id="rig">
					<p>已选择<span></span>件商品</p>
					<p><span>总价 : </span><strong class="sumPrice"></strong></p>
					<button type="button">去结算</button>
				</div>
			</div>	
			<!-- <input type="checkbox" name="" id="checkAll" value="正选" />
			<input type="checkbox" name="" id="checkOther" value="反选" />
				<ul>
					<li><input type="checkbox" name="" id="" value="" /></li>
					<li><input type="checkbox" name="" id="" value="" /></li>
					<li><input type="checkbox" name="" id="" value="" /></li>
					<li><input type="checkbox" name="" id="" value="" /></li>
					<li><input type="checkbox" name="" id="" value="" /></li>
				</ul> -->
		</div>
		<!--中间end-->
		<!-- 页面底部分 start-->
		<footer>
			<div class="serv">
				<div class="w">
					<ul>
						<li>
							<h5>多</h5>
							<p>品类齐全，轻松购物</p>
						</li>
						<li>
							<h5>快</h5>
							<p>多仓直发，极速配送好</p>
						</li>
						<li>
							<h5>好</h5>
							<p>正品行货，精致服务</p>
						</li>
						<li>
							<h5>省</h5>
							<p>天天低价，畅选无忧</p>
						</li>
		
					</ul>
				</div>
			</div>
			<!-- 帮助模块 -->
			<div class="w help">
				<div class="ditu">
					<dl>
						<dt>购物指南</dt>
						<dd><a href='javascript:;'>购物流程</a></dd>
						<dd><a href='javascript:;'>会员介绍</a></dd>
						<dd><a href='javascript:;'>生活旅行</a></dd>
						<dd><a href='javascript:;'>常见问题</a></dd>
						<dd><a href='javascript:;'>大家电</a></dd>
						<dd><a href='javascript:;'>联系客服</a></dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd><a href='javascript:;'>上门自提</a></dd>
						<dd><a href='javascript:;'>211限时达</a></dd>
						<dd><a href='javascript:;'>配送服务查询</a></dd>
						<dd><a href='javascript:;'>配送费收取标准</a></dd>
						<dd><a href='javascript:;'>海外配送</a></dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd><a href='javascript:;'>货到付款</a></dd>
						<dd><a href='javascript:;'>在线支付</a></dd>
						<dd><a href='javascript:;'>分期付款</a></dd>
						<dd><a href='javascript:;'>邮局汇款</a></dd>
						<dd><a href='javascript:;'>公司转账</a></dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href='javascript:;'>售后政策</a></dd>
						<dd><a href='javascript:;'>价格保护</a></dd>
						<dd><a href='javascript:;'>退款说明</a></dd>
						<dd><a href='javascript:;'>返修/退换货</a></dd>
						<dd><a href='javascript:;'>取消订单</a></dd>
					</dl>
					<dl>
						<dt>特色服务</dt>
						<dd><a href='javascript:;'>夺宝岛</a></dd>
						<dd><a href='javascript:;'>DIY装机</a></dd>
						<dd><a href='javascript:;'>延保服务</a></dd>
						<dd><a href='javascript:;'>京东E卡</a></dd>
						<dd><a href='javascript:;'>京东通信</a></dd>
						<dd><a href='javascript:;'>京东JD+</a></dd>
					</dl>
				</div>
				<div class="coverage">
		
					<h5>京东自营覆盖区县</h5>
					<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
					<a href='javascript:;'>查看详情<</a> </div> <!-- 版权模块 -->
							<div class="w copyright">
								<p>
									<a href='javascript:;'>关于我们</a>
									<span>|</span>
									<a href='javascript:;'>联系我们</a>
									<span>|</span>
									<a href='javascript:;'>联系客服</a>
									<span>|</span>
									<a href='javascript:;'>合作招商</a>
									<span>|</span>
									<a href='javascript:;'>商家帮助</a>
									<span>|</span>
									<a href='javascript:;'>营销中心</a>
									<span>|</span>
									<a href='javascript:;'>手机京东</a>
									<span>|</span>
									<a href='javascript:;'>友情链接</a>
									<span>|</span>
									<a href='javascript:;'>销售联盟</a>
									<span>|</span>
									<a href='javascript:;'>京东社区</a>
									<span>|</span>
									<a href='javascript:;'>风险监测</a>
									<span>|</span>
									<a href='javascript:;'>隐私政策</a>
									<span>|</span>
									<a href='javascript:;'>京东公益</a>
									<span>|</span>
									<a href='javascript:;'>English Site</a>
									<span>|</span>
									<a href='javascript:;'>Media & IR</a>
								</p>
								<div>
									<p>
										京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零
										字第大120007号
									</p>
									<p>
										互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155
									</p>
									<p>
										Copyright © 2004 - 2017 京东JD.com 版权所有<span>|</span>消费者维权热线：4006067733经营证照
									</p>
									<p>
										京东旗下网站：京东支付<span>|</span>京东云
									</p>
								</div>
								<p class="footicon">
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
								</p>
							</div>
				</div>
				<!-- 底部部分  end -->
		</footer>
		<!-- 页面底部分 end-->
		<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#checkAll").click(function(){
					$("li	 input").prop("checked",$(this).prop("checked"))
				})
				$("#checkOther").click(function(){
					$("li input").each(function(){
						$(this).prop("checked",!$(this).prop("checked"))
					})
				})
				$("li input").click(function(){
						
					if($("li input:checked").length == $("li input").length){
						$("#checkAll").prop("checked",true);
					}else{
						$("#checkAll").prop("checked",false);
					}
				})	
			})
			
			
			let token = localStorage.getItem('token')
			
			$.post("http://47.104.244.134:8080/cartlist.do",{
				token
			}).done(data=>{
				// console.log(data)
				let html = ''
				for(let i=0;i<data.length;i++){
					let pObj = data[i].goods
					let Obj = data[i]
					// console.log(pObj)
					// console.log(Obj)
					html += `
						<div class="single1">
							<input type="checkbox"  pid='${Obj.id}' gid='${Obj.gid}'  class="pro-check"/>
							<div class="tu">
								<img src="${pObj.picurl}" >
							</div>
							<p>${pObj.name}</p>
						</div>
						<div class="single2">
							<p class="price">￥${pObj.price}</p>
							<form action="" method="">
								<input type="button" name="" class='sub' pid='${Obj.id}' gid='${Obj.gid}' value="-" />
								<input type="text" name="" class='pnum' value="${Obj.count}" />
								<input type="button" name="" class='add' pid='${Obj.id}' gid='${Obj.gid}' value="+" />
							</form>
							<p  class="pro-price">￥${pObj.price*Obj.count}</p>
							<a href="javascript:;" pid='${Obj.id}' gid='${Obj.gid}' class='del'>删除</a>
						</div>
					`
				}
				$('.single').html(html)
				
				
				//删除按钮 
				$('.del').click(function(){
					let id = $(this).attr('pid')
					let gid = $(this).attr('gid')
					console.log($(this).parent(),$(this).parent().prev())

					$.get("http://47.104.244.134:8080/cartupdate.do",{
						id,gid,token,num:0
					}).done(data=>{
						$(this).parent().prev().remove()
						$(this).parent().remove()
						count()
					})
				})
				

				//全选按钮点击事件
				$('.check-all').click(function() {
					// if(this.checked)
				    // console.log(this.checked)
				    
					if (this.checked) {
						for (let j = 0; j < $('.check-all').length; j++) {
							$('.check-all')[j].checked = true
						}
						// console.log($('.pro-check').length)
						for (let j = 0; j < $('.pro-check').length; j++) {
							$('.pro-check')[j].checked = true
						}
					} else {
						for (let j = 0; j < $('.pro-check').length; j++) {
							$('.pro-check')[j].checked = false
				        }
				        for (let j = 0; j < $('.check-all').length; j++) {
							$('.check-all')[j].checked = false
						}
					}
					count()
				})
				
				//单选按钮事件
				$('.pro-check').click(function(){
					
					let arr1 = Array.from($('.pro-check'))  //把jQuery伪数组 转化为真数组
					let flag = arr1.every(v=>{    //array中的方法，传一个函数，全部为真才为真
						return v.checked == true
					})
					if(flag){
						$('.check-all')[0].checked = true
						$('.check-all')[1].checked = true
					}else{
						$('.check-all')[0].checked = false
						$('.check-all')[1].checked = false
					}
					count()
				})

								
				// 减按钮事件
				$('.sub').click(function(){
					if($(this).next().val() > 1){
						let id = $(this).attr('pid')
						let gid = $(this).attr('gid')
						$.get("http://47.104.244.134:8080/cartupdate.do",{
							id,gid,token,num:-1
						}).done(data=>{
							if(data.code == 0){
								$(this).next().val(parseInt($(this).next().val())-1)
								let index = $('.sub').index(this)
								let price = parseInt($('.price').eq(index).text().split('￥')[1])
								let num = parseInt($('.pnum').eq(index).val())
								$('.pro-price').eq(index).text('￥'+price*num)
								count()
							}
						})
					}
				})
				
			
								
				
				// 加按钮事件
				$('.add').click(function(){
					let id = $(this).attr('pid')
					let gid = $(this).attr('gid')
					$.get("http://47.104.244.134:8080/cartupdate.do",{
						id,gid,token,num:1
					}).done(data=>{
						if(data.code == 0){
							$(this).prev().val(parseInt($(this).prev().val())+1)
							let index = $('.add').index(this)
							let price = parseInt($('.price').eq(index).text().split('￥')[1])
							let num = parseInt($('.pnum').eq(index).val())
							$('.pro-price').eq(index).text('￥'+price*num)
							count()
						}
					})
				})
				
				
				//删除选中
				$('.del-selected').click(function(){
					let arr = Array.from($('.pro-check'))
					arr = arr.filter(function(v){
						return v.checked
					})
					for(let i=0;i<arr.length;i++){
						let id = arr[i].getAttribute('pid')
						let gid = arr[i].getAttribute('gid')
						// console.log(id,gid)
						$.get("http://47.104.244.134:8080/cartupdate.do",{
							id,gid,token,num:0
						}).done(data=>{
							$('.pro-check').eq(i).parent().next().remove()
							$('.pro-check').eq(i).parent().remove()
							count()
						})
					}
				})
				
				//清理购物车
				
				$('.clear-cart').click(function(){
					let arr = Array.from($('.pro-check'))
					for(let i=0;i<arr.length;i++){
						let id = arr[i].getAttribute('pid')
						let gid = arr[i].getAttribute('gid')
						// console.log(id,gid)
						$.get("http://47.104.244.134:8080/cartupdate.do",{
							id,gid,token,num:0
						}).done(data=>{
							$('.pro-check').eq(i).parent().next().remove()
							$('.pro-check').eq(i).parent().remove()
							count()
						})
					}
				})
				
				

				//计算数量并调用函数显示
				function count(){
					let sumPrice = 0
					$('.pro-check').each(function(j){
						if($('.pro-check')[j].checked){
							sumPrice += parseInt($('.pro-price').eq(j).text().split('￥')[1])
						}
					})
					
					$('.sumPrice').text()?$('.sumPrice').text(sumPrice):$('.sumPrice').text(0)
				}
				
				
				
				count()

			})

			
		</script>
	</body>
</html>
